Navigation Bar settings

Description

If enabled, the Navigation Bar settings are used to configure the List Control's Navigation Bar. The Navigation Bar can be shown either in the List's header, footer, or in a DIV in the UX Component.

Discussion

The List Control supports using a Navigation Bar to navigate pages of records in a List based on a SQL Data Source. The List must be configured to use Pagination with the Pagination method set to "NavigationBar". The Navigation Bar settings are used to configure the built-in Navigation Bar, which can be turned on by checking the Has Navigation Bar property.

The built-in Navigation Bar offers several advantages over the List-Navigation Buttons and List-Navigation Icons pre-built controls for List navigation. While these controls can be used to add navigation to a UX Component for a paginated List Control, the List-Navigation Buttons and Icons have several drawbacks:

List-Navigation Buttons and Icons do not include numbers for pages relative to the current page.
If the List Control is duplicated, you must manually add the List-Navigation Buttons and Icons for the new List.
If the List Control is copied to another Component, you must manually copy the List-Navigation Buttons and Icons.
If the List Control's name changes (such as when it is copied to another UX that already contains a list with the same name), you must manually update the List-Navigation Buttons and Icons to use the new List name.

The Navigation Bar can be placed in the List Header, List Footer or a custom DIV on the page. For information on where you can go to extend the buttons with custom client-side JavaScript, see Events below.

Properties

The properties available to you for configuring the built-in Navigation Bar for a List Control are explained below:

Number of buttons
This setting controls the number of "target page" buttons shown in the Navigation Bar. The target page buttons are shown for pages before and after the current page. If the user is not on the first or last page of the List, the target page buttons are distributed equally about the current page. For example, if the user is on page 10 of 20 and Number of buttons has been set to 6, target buttons will be shown for pages 7, 8, 9, 11, 12, and 13.
To control whether or not the current page number is shown, see Show current page number below.
Navigation Bar with 6 target buttons on first page.
Navigation Bar with 6 target buttons on page 10.
Navigation Bar with 6 target buttons on last page.
First record icon
The First record icon is the icon shown for the button to navigate to the very first page of data in the List Control. The default image used is the one defined for the {images.grid.firstPage} placeholder. The image can be any image, SVG Icon, or Font Icon.
Previous record icon
The Previous record icon is the icon shown for the button to navigate to the previous page of data in the List Control relative to the current page. The default image used is the one defined for the {images.grid.prevPage} placeholder. The image can be any image, SVG Icon, or Font Icon.
Next record icon
The Next record icon is the icon shown for the button to navigate to the next page of data in the List Control relative to the current page. The default image used is the one defined for the {images.grid.nextPage} placeholder. The image can be any image, SVG Icon, or Font Icon.
Last record icon
The Last record icon is the icon shown for the button to navigate to the very last page of data in the List Control. The default image used is the one defined for the {images.grid.lastPage} placeholder. The image can be any image, SVG Icon, or Font Icon.
Button size
The Button size property defines the size of the buttons. There are currently two choices for size:
Size
Description
Normal
Uses the default size for buttons. Best for a mobile environment.
Compact
Uses the "compact" theme for the style. This style is more appropriate in a desktop web application.
This property only applies if you are using a Version 4 style, such as the 'Alpha' style.
"Normal" Navigation Bar buttons.
"Compact" Navigation Bar buttons.
Navigation Buttons using the 'GrBlue' theme. The 'GrBlue' theme does not support the Button Size property.
Navigation Bar justification
The Navigation Bar's alignment can be controlled using the Navigation Bar justification property. The following alignment options are available:
- Left
- Center
- Right
The alignment only applies if the Navigation bar placement has been set to "ListFooter" or "ListHeader".
Show current page number
If checked, the page number will be shown in the Navigation Bar. Use the Current page number template property to specify how the page number is displayed.
Current page number template
This property defines the template for the current page number. The template can include any HTML you want as well as the following place holders:
Placeholder
Description
{pageNumber}
The current page number.
{pageCount}
The total page count.
For example:
```
{pageNumber} of {pageCount}
```
Navigation Bar using the template {pageNumber} of {pageCount}
If the {pageNumber} placeholder is not included in the template, the page number will not be shown. Similarly, if Show input control for current page number has been enabled and the {pageNumber} placeholder is not used in the template, the textbox for entering the page number will also not be shown.
Show input control for current page number
If checked, the {pageNumber} placeholder will be rendered as a textbox in the Navigation Bar. allowing the user to change the current page by typing the page number.
This option is only available if Show current page number has been checked.
Target page input control size
If Show input control for current page number has been checked, this property is shown. The Target page input control size defines the width of the textbox shown for the page number. The width is specified using CSS units. For example, 100px, 1in, or 50%.
Show page size selector
If checked, a dropdown box will be added to the Navigation Bar allowing the user to change the number of records per page.
Page sizes
If Show page size selector has been checked, the Page sizes property is available. This property is used to define the page sizes available for the user to choose from for the List Control.
Page size selector template
```
Page size: {pageSizeSelector}
```
Navigation bar placement
The Navigation bar placement defines where to render the List's Navigation Bar. It can be placed in several locations:
Location
Description
ListFooter
The Navigation Bar will be placed in the footer of the List control. The List footer/header placement property can be used to control where the Navigation Bar should appear relative to any custom footer HTML content that has been defined.
ListHeader
The Navigation Bar will be placed in the header of the List control. The List footer/header placement property can be used to control where the Navigation Bar should appear relative to any custom header HTML content that has been defined.
Custom
The Navigation Bar will be placed in a custom location. The locations defined using the Navigation Bar div property, which specifies the ID of a DIV on the UX component where the Navigation Bar should be placed.
List footer/header placement
If the Navigation bar placement has been set to "ListFooter" or "ListHeader", this property can be used to configure where the Navigation Bar should be shown relative to any custom content in the List Footer or List Header.
Location
Description
AboveUserContent
The Navigation Bar will be shown above any custom content.
BelowUserContent
The Navigation Bar will be shown below any custom content.
Navigation Bar placement set to "AboveUserContent" in the List Footer
Navigation Bar placement set to "BelowUserContent" in the List Footer
Navigation Bar div
If the Navigation bar placement has been set to "Custom", this property can be used to configure where the Navigation Bar should be shown. You must specify the ID of a DIV in the UX Component. The DIV can be an HTML DIV element in the UX Component. It can also be the ID of a Static Text or Placeholder control. For example:
The DIV can be the ID of a Static Text Control. This example demonstrates how you would specify the ID for a Static Text control with the name 'STATICTEXT_1'.
```
{dialog.componentName}.V.R1.STATICTEXT_1
```
The Navigation Bar placed in a DIV in a Static Text Control inside a Panel Footer.
You can also an Injectible Container with a DIV in it. This makes it easier to embed the Navigation Bar in other places in the UX Component. For example:
The Navigation Bar is easily placed in Fixed List Footer using an Injectible Container.
Click here to download an example component that demonstrates using an Injectible Container to inject the Navigation Bar in a Fixed List Footer.

Events

You can use the following List Control events to add custom JavaScript to execute when the user navigates the List:

Event: Description
onNavigate: Fires when the List has been navigated.
beforePageNavigate: Fires before an Ajax Callback to navigate to a different page of records.
afterPageNavigate: Fires after an Ajax Callback to fetch more records has completed.

Videos

Page Navigation Bar

In a Grid component you can add a Navigation Bar to allow the user to navigate from one 'page' or records to another. In a List control (that is based on a SQL database, has pagination tuned on and has the pagination method set to Navigation Buttons), you can also add a Navigation Bar to allow the user to navigate from one 'page' or records to another.

In this video we show how to configure a List control to display a Navigation Bar.

Watch Video

2018-11-05

Report an issue with this page